{% extends 'base.html' %}



{% block contents_inner %}
<div class="col-12">
    <div class="section-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="content-details" id="pmChart" style="width: 100%; height: 600px;"></div>
            </div>
        </div>
    {% csrf_token %}
    </div>
</div>

{% endblock %}


{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('pmChart'));

    $(document).ready(function () {
        $.ajax({
            url: '{% url 'chart:pollutant_correlation_analysis' %}', // 这里填写后端提供no2数据的URL
            type: 'post',
            headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
            success: function(data) {
                var heatmapData = [];
                var xAxisData = Object.keys(data.corr_matrix);
                var yAxisData = Object.keys(data.corr_matrix);

                xAxisData.forEach(function(x, xi) {
                    yAxisData.forEach(function(y, yi) {
                        heatmapData.push([xi, yi, data.corr_matrix[x][y] || '-']);
                    });
                });

                option = {
                    title: {
                        left: 'center',
                        text: '污染物相关性分析'
                    },
                    tooltip: {
                        position: 'top',
                        formatter: function (params) {
                            return xAxisData[params.data[0]] + ' & ' + yAxisData[params.data[1]] + ': ' + params.data[2];
                        }
                    },
                    grid: {
                        height: '50%',
                        top: '10%'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['aqi', 'pm2_5', 'pm10', 'co', 'no2', 'so2', 'o3'],
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['aqi', 'pm2_5', 'pm10', 'co', 'no2', 'so2', 'o3'],
                        splitArea: {
                            show: true
                        }
                    },
                    visualMap: {
                        min: -1,
                        max: 1,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '15%',
                        inRange: {
                            color: ['#0000FF', '#FF0000']
                        }
                    },
                    series: [{
                        name: 'Correlation',
                        type: 'heatmap',
                        data: heatmapData,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            },
            error: function(error) {
                console.error('请求数据失败:', error);
            }
        });
    });
</script>
{% endblock %}
